<template>
	<view class="personal">
		<view class="head-infor">
			<view class="login-box" v-if="noLogin">
				<image src="../../static/icons/no_login_header.png" mode="widthFix"></image>
				<!-- #ifdef MP-WEIXIN -->
				<button class="login-btn" open-type="getUserInfo" @getuserinfo="getUserInfo" withCredentials="true">微信登录</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<button class="" open-type="getUserInfo" @tap="getUserInfo" withCredentials="true">微信登录</button>
				<!-- #endif -->
			</view>
			<view class="login-box" v-if="logined">
				<image :src="avatar" mode="widthFix"></image>
				<text class="name">{{nickName}}</text>
				<text class="address">{{address}}</text>
			</view>
			<view class="set">
				<navigator url="../setList/setList" hover-class="none">
					<image src="../../static/icons/set_icon.png" mode="widthFix"></image>
				</navigator>
			</view>
		</view>
		<view class="tab"> 
			<text v-for="(item,index) in tabList" :data-index="index" :key="index" @tap="choosed" :class="[curr==index?'active':'']">
			{{item}}
			</text>
		</view>
		<view class="tab-cont wrap">
			<scroll-view scroll-y="true">
				<view class="thumbial" v-for="item in hotArry" :key="item.id">
					<navigator :url="'../detail/detail?id='+item.id">
						<view class="thumbial-img">
							<image :src="item.images.small" mode="widthFix"></image>
						</view>
						<view class="thumbial-body">
							<text>{{item.title}}</text>
						</view>
					</navigator>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	let isAvatar = global.isLogin()[0]||'';
	let isNickName = global.isLogin()[1]||'';
	export default {
		data() {
			return {
				noLogin: true,
				logined: false,
				avatar: isAvatar,
				nickName: isNickName,
				address: '北京-东城',
				tabList: [
					'收藏',
					'已观看',
					'个人中心'
				],
				curr: 0,
				save: []
			}
		},
		onLoad() {
			this.getSaveInfor();
		},
		onShow() {
			if (global.isLogin() == false) 
			{
				uni.showToast({
					title: '你还没登录',
					icon: "none"
				});
				this.noLogin=true;
				this.logined=false;
			}else{
				this.noLogin=false;
				this.logined=true;
			}
		},
		methods: {
			choosed: function(e) {
				let index = e.currentTarget.dataset.index;
					this.curr = index;
			},
			getSaveInfor: function() {
				let saveData = global.Store.getStores('save');
				for (var i=0; i<saveData.length; i++) {
					let obj = saveData[i];
					this.save.push(obj);
				}
				
			},
			// login
			getUserInfo: function (res1) {
				if (!res1.detail.iv) {
					uni.showModal({
						title: '你取消了授权',
					});
					return false
				} 
				// console.log(res1);//res1基本信息
				try{
					uni.setStorageSync('wxAvatar',res1.detail.userInfo.avatarUrl);
					uni.setStorageSync('wxNickName',res1.detail.userInfo.nickName);
					this.avatar = global.isLogin()[0];
					this.nickName = global.isLogin()[1];
					this.noLogin=false;
					this.logined=true;
				}catch(e){
					//TODO handle the exception
				}
				uni.login({
					success: function(res2) {
						// console.log(res2)//获取到了code
						let appid = global.appid;
						let secret = global.secret;
						// 获取openid和sessionkey
						uni.request({
							url: 'https:///hoa.hcoder.net/xcxencode/?c=sk&appid='+appid+'&secret='+secret+'&code='+res2.code,
							success: function(res3){
								//console.log(res3)//到此获取就获取到了openID和sessionkey
							},
							fail: function(e) {
								console.log(e)
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	.head-infor{
		position: relative;
		background: url() no-repeat center;
		background-size: cover;
		padding: 140upx 0 80upx 0;
	}
	.head-infor .login-box{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.head-infor image{
		display: block;
		margin-bottom: 16upx;
		width: 200upx;
		height: 200upx;
		border-radius: 50%;
		/* border: 2px solid #ccc; */
	}
	.head-infor text{
		display: block;
		padding: 4upx 0;
		font-size: 36upx;
		color: #fff;
	}
	.head-infor .address{
		font-size: 24upx;
		color: #eee;
	}
	.tab{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx;
		font-size: 26upx;
	}
	.tab text{
		padding: 12upx 0;
		color: #999;
	}
	.tab text.active{
		color: #444;
		border-bottom: 2px solid #00CADA;
	}
	.login-btn{
		width: 180upx;
		height: 70upx;
		line-height: 70upx;
		text-align: center;
		border: 1px solid #eee;
		color: #666;
		font-size: 28upx;
		outline-style: none;
	}
	.set{
		position: absolute;
		top: 150upx;
		right: 60upx;
		z-index: 99;
		width: 50upx;
		height: 50upx;
	}
	.set image{
		display: block;
		width: 100%;
	}
</style>
